<template>
    <f7-page ptr @ptr:refresh="refresh" infinite :infinite-distance="50" :infinite-preloader="true" @infinite="infinite"
        class="common-page">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>移动机械</f7-nav-title>
            <f7-nav-right> </f7-nav-right>
        </f7-navbar>
        <div class="content">
            <div class="top-search">
                <van-search v-model="search.keyword" @search="searchQuery" shape="round" background="#F7F8FA"
                    placeholder="车牌号/设备号、工程名称" right-icon="search" left-icon="" />
            </div>
            <f7-list media-list class="search-list" v-if="query.data.length > 0">
                <li v-for="(item, index) in query.data" :key="index" class="content-box" @click="onDetail(item)">
                    <img :src="require(`../../../../../assets/img/qzjx/mobile/${item.equipmentType ? item.equipmentType.toUpperCase() : 'QT'
        }.png`)
        " alt="" class="left-box" />
                    <div class="right-box">
                        <div class="title-box">
                            <h3>
                                {{ item.recordCode }}
                            </h3>
                        </div>
                        <p>
                            设备类型：<span class="value">{{
        item.equipmentType.toUpperCase() | DictItem(mobileEquipmentType)
    }}</span>
                        </p>
                        <p>
                            进场时间：<span class="value">{{ item.enterTime || "--" }}</span>
                        </p>
                        <p class="engi-name">
                            <span class="value">{{ item.engineeName || "--" }}</span>
                        </p>
                    </div>
                </li>
            </f7-list>
            <v-empty v-else description="暂无数据" style="padding-top: 67px !important" />
        </div>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            model: "/app/equipment/eqmMobileRegister/queryEquipmentType",
            query: "/equipment/eqmMobileRegister/queryRegisterList",
        };
    }
    onInit() {
        this.setSearch("useStatusList", this.$f7route.query.useStatusList, "list");
        this.setSearch("equipmentType", this.$f7route.query.equipmentType, "list");
        this.setSearch("engineeId", this.$f7route.query.engineeId, "list");
        this.setSearch("areaName", this.$f7route.query.areaName, "list");
        this.setSearch("type", this.$f7route.query.type, "list");
    }

    onAfterQuery(type, isSuccess, result) {
        if (type == "form") {
            this.context.mobileEquipmentType = result.parameters?.mobileEquipmentType;
        }
        return result;
    }

    mixin() {
        return {
            data() {
                return {
                    search: {},
                    mobileEquipmentType: [],
                };
            },
            methods: {
                async onDetail(item) {
                    this.$f7router.navigate(
                        `/business/qzjx/mobileEquipment/equip/detail?pageAction=view&registerId=${item.registerId}&engineeId=${item.engineeId}&useStatus=${item.useStatus}`
                    );
                },
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../assets/css/commonPage.less");

.top-search {
    position: fixed;
    z-index: 99;
    width: 100%;
    display: flex;
    align-items: center;
    height: 57px;
    background: #fff;
    padding: 0 16px;
    box-sizing: border-box;
    border-top: 1px solid #eeeeee;

    .van-search {
        height: 35px;
        flex: 1;
        border-radius: 17.5px;
    }
}

.common-page .search-list {
    padding-top: 67px;

    .value {
        color: #8995ac;
    }

    .engi-name {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
